<template>
  <view class="course-management-container">

    <!-- 搜索栏 -->
    <view class="search-bar-container">
      <uni-search-bar 
        v-model="queryParams.name" 
        placeholder="请输入课程名称"
        @input="handleQuery"
        :radius="12"
        cancelButton="none"
      />
    </view>

    <!-- 课程列表 -->
    <uni-list class="course-list">
      <view 
        class="list-item-wrapper" 
        v-for="item in courseList" 
        :key="item.id"
        @click="handleItemClick(item)"
      >
        <uni-list-item 
          :title="item.name" 
          :note="`所属班级:${item.className} 授课教师:${item.teacherName}`"
          ellipsis="1"
        >
          <template v-slot:footer>
            <view class="item-status">
              <uni-tag 
                :text="item.effective === '1' ? '启用' : '禁用'"
                :type="item.effective === '1' ? 'success' : 'error'"
                size="small"
                :circle="true"
              ></uni-tag>
            </view>
          </template>
        </uni-list-item>
      </view>
      
      <uni-empty 
        v-if="courseList.length === 0" 
        text="暂无课程数据" 
        mode="list"
      />
    </uni-list>
      
    <!-- 分页组件 -->
    <uni-pagination 
      v-if="total > 0" 
      :total="total" 
      :current="queryParams.pageNum" 
      :pageSize="pageSize" 
      @change="handlePageChange"
      show-icon
      size="small"
      prev-text="上一页"
      next-text="下一页"
      style="margin: 20px 0; text-align: center;"
    />

  </view>
</template>

<script>
  import request from '@/utils/request'

  export default {
    data() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: '',
          effective: ''
        },
        // 课程列表
        courseList: [],
        // 分页相关
        total: 0,
        pageSize: 10,
        // 遮罩层
        loading: false
      }
    },
    onLoad() {
      this.getList()
    },
    onShow() {
      // 页面显示时刷新列表数据
      this.getList()
    },
    methods: {
      // 查询列表
      getList() {
        this.loading = true
        // 设置分页参数
        this.queryParams.pageSize = this.pageSize
        request({
          url: '/ysg/course/list',
          params: this.queryParams,
          method: 'GET'
        }).then(res => {
          if (res.code === 200) {
            // 更新列表数据
            this.courseList = res.rows || []
            // 更新总条数
            this.total = res.total || 0
          }
          this.loading = false
        }).catch(error => {
          console.warn('获取课程列表失败', error)
          this.loading = false
          // 使用模拟数据
          this.courseList = [
            {
              id: 1,
              courseName: '绘画初级课程',
              className: '绘画班',
              teacherName: '张老师',
              status: '1',
              createTime: '2025-12-02 13:05:30'
            },
            {
              id: 2,
              courseName: '书法高级课程',
              className: '书法班',
              teacherName: '李老师',
              status: '1',
              createTime: '2025-12-02 13:06:15'
            },
            {
              id: 3,
              courseName: '舞蹈基础课程',
              className: '舞蹈班',
              teacherName: '王老师',
              status: '0',
              createTime: '2025-11-15 09:30:00'
            }
          ]
          // 模拟总条数
          this.total = this.courseList.length
        })
      },
      
      // 搜索
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      
      // 分页变化事件
      handlePageChange(e) {
        this.queryParams.pageNum = e.current
        this.getList()
      },
      
      // 点击列表项
      handleItemClick(item) {
        // 跳转到课程详情页面
        this.$tab.navigateTo(
           `/pages/work/course-detail?id=${item.id}&courseName=${item.courseName}&className=${item.className}&teacherName=${item.teacherName}&status=${item.status}`
        )
      }
    }
  }
</script>

<style scoped>
  .course-management-container {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding: 0;
    margin: 0;
  }

  /* 搜索栏容器 */
  .search-bar-container {
    padding: 3px 8px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 0;
  }

  /* 确保搜索栏高度一致 */
  .uni-search-bar {
    height: 38px;
  }

  .uni-search-bar__input {
    height: 38px;
    line-height: 38px;
  }

  /* 列表区域 */
  .course-list {
    background-color: white;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    margin: 0;
  }

  .item-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  /* 列表项包裹器样式 */
  .list-item-wrapper {
    display: block;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
  }

  .list-item-wrapper:active {
    background-color: #f5f7fa;
  }
</style>